{% extends 'base/base.html' %}
{#{% load static %}#}
{#加载图片文件#}
{% block title %}
{{ title }}
{% endblock %}

{% block link %}
  <link rel="stylesheet" href="../../static/css/base/reset.css">
  <link rel="stylesheet" href="../../static/css/base/common.css">
  <link rel="stylesheet" href="../../static/css/news/news-detail.css">
  <link rel="stylesheet" href="../../static/css/base/side.css">

{% endblock %}

{% block main %}
<!-- main start -->
<main id="main">
  <div class="w1200 clearfix">
    <!-- news-contain start  -->
      <div class="main-contain">

    <div class="news-contain">
      <h1 class="news-title">{{ news.title }}</h1>
      <div class="news-info">
        <div class="news-info-left">
          <span class="news-author">{{ news.author.username }}</span>
          <span class="news-pub-time">{{ news.update_time }}</span>
          <span class="news-type">{{ news.tag.name }}</span>
        </div>
      </div>
      <article class="news-content">
        {{ news.content | safe}}


      </article>

          <div class="comment-contain">
        <div class="comment-pub clearfix">
          <div class="new-comment">
            文章评论(<span class="comment-count">0</span>)
          </div>
          {% if user.is_authenticated %}
          <div class="comment-control logged-comment" news-id="{{ news.id }}">
            <input type="text" placeholder="请填写评论">
            <button class="comment-btn">发表评论</button>
          </div>
        {% else %}
          <div class="comment-control please-login-comment" news-id="{{ news.id }}">
            <input type="text" placeholder="请登录后参加评论" readonly>
            <button class="comment-btn">发表评论</button>
          </div>
        {% endif %}

        </div>
        <ul class="comment-list">
          {% for i in comm %}
            <li class="comment-item">
            <div class="comment-info clearfix">
              <img src="{% static 'images/avatar.jpeg' %}" alt="avatar" class="comment-avatar">
              <span class="comment-user">{{ i.author }}</span>
{#              <span class="comment-pub-time">{{ i.update_time }}</span>#}
            </div>
            <div class="comment-content">{{ i.content }}</div>

              {% if i.parent %}
              <div class="parent_comment_text">
                <div class="parent_username">{{ i.parent.author }}</div>
                <br/>
                <div class="parent_content_text">
                  {{ i.parent.content }}
                </div>
              </div>
              {% endif %}

              <div class="comment_time left_float">{{ i.update_time }}</div>
              <a href="javascript:void(0);" class="reply_a_tag right_float">回复</a>
              <form class="reply_form left_float" comment-id="{{ i.content_id }}"
                    news-id="{{ i.news_id }}">
                <textarea class="reply_input"></textarea>
                <input type="button" value="回复" class="reply_btn right_float">
                <input type="reset" name="" value="取消" class="reply_cancel right_float">
              </form>
          </li>
          {% endfor %}

        </ul>
      </div>

    </div>
</div>
    <!-- news-contain end  -->

    <!-- side start -->
      <aside class="side">
          <div class="side-activities">
              <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
              <div class="activities-img">
                  <a href="javascript:void(0);" target="_blank">
                      <img src="../../static/images/english.jpg" alt="title">
                  </a>
                  <p class="activities-tips">对话国外小姐姐</p>
              </div>
              <ul class="activities-list">
                  <li>
                      <a href="javascript:void(0);" target="_blank">
                          <span class="active-status active-start">报名中</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
                      </a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank">
                          <span class="active-status active-end">已结束</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="side-attention clearfix">
              <h3 class="attention-title">关注我</h3>
              <ul class="side-attention-address">
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
                                                                       style="color:rgb(0, 108, 226);"></i>Taka</a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
                                                                       style="color:rgb(245,92,110);"></i>Taka</a>
                  </li>
              </ul>
              <div class="side-attention-qr">
                  <p>扫码关注</p>
              </div>
          </div>


          <div class="side-hot-recommend">
              <h3 class="hot-recommend">猜你喜欢</h3>
              <ul class="hot-news-list">

                  {% for i in click %}
                  <li>
                      <a href="{% url 'news:news_id' i.id %}" class="hot-news-contain clearfix">
                          <div class="hot-news-thumbnail">
                              <img src="{{ i.image_url }}"
                                   alt="">
                          </div>
                          <div class="hot-news-content">
                              <p class="hot-news-title">{{ i.title }}</p>
                              <div class="hot-news-other clearfix">
                                  <span class="news-type">{{ i.tag }}</span>
                                  <!-- 自带的 -->
                                  <time class="news-pub-time">{{ i.update_time|timeuntil }}</time>
                                  <span class="news-author">{{ i.author.username }}</span>
                              </div>
                          </div>
                      </a>
                  </li>
                  {% endfor %}
              </ul>
          </div>

      </aside>
    <!-- side end -->
  </div>
</main>
<!-- main end -->
{% endblock %}

{% block script %}
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="../../static/js/user/news_comm.js"></script>
{% endblock %}










